<template>
  <div class="container">
    <div class="pad-t-18 pad-l-15 pad-r-15">
      <div class="cash-block text-align-c" :style="'background-color: #ffe100;'">
        <div class="font-14 pad-t-16">可提现金额</div>
        <div style="font-size: 33px;">￥{{memberStat.availableAmount}}</div>
        <div>
          <button class="cash-btn font-color" @click="$pt.navigateTo({url: '/pages/order/wallet/cash/main'})">我要提现</button>
        </div>
        <div class="total-row pad-l-14 pad-r-14 pad-t-10 pad-b-10 flex flex-between mar-t-10">
          <span>累计收入￥{{memberStat.totalAmount}}</span>
          <span>待结算￥{{memberStat.unavailableAmount}}</span>
        </div>
      </div>
    </div>
    <div class="tabs-bar">
      <div class="tabs-title">
        <div class="tabs-title-box border-b font-15">
          <div :class="active === 1 ? 'select-b active' : 'select-b'" @click="activeClick(1)">提现记录</div>
          <div :class="active === 2 ? 'select-b active' : 'select-b'" @click="activeClick(2)">待入账明细</div>
        </div>
      </div>
      <div class="tabs-items" v-if="active === 1">
        <div class="pad-t-8 pad-b-8 mar-t--6" style="font-size:20rpx;text-align:center;background:#FFF7E3;">
          <span>温馨提示：提现成功后当日或即日到账。</span>
        </div>
        <template v-if="listData.length > 0">
          <div class="tabs-item" v-for="(item, index) in listData" :key="index">
            <div class="tabs-item-box border-b">
              <div class="flex-layout font-14">
                <div class="font-color-8">
                  <span>{{item.applyTime}}</span>
                </div>
                <div class="font-w" :class="'color--' + item.takeOutStatus">{{takeOutStatus[item.takeOutStatus]}}</div>
              </div>
              <div class="flex-layout font-14">
                <div class="withdraw-amount font-18">
                  ￥{{item.applyAmount}}
                </div>
                <div class="reason color--2" v-if="item.takeOutStatus === 2">
                  原因：{{item.rejectReason}}
                </div>
              </div>
            </div>
          </div>
        </template>
        <div class="nodata" v-if="listData.length <= 0">暂无数据</div>
      </div>
      <div class="tabs-items" v-if="active === 2">
        <template v-if="listData.length > 0">
          <div class="income-wait" v-for="(item, index) in listData" :key="index">
            <div class="income-wait-box">
              <div class="cell-left">
                <div>
                  <img v-if="item.avatar" :src="item.avatar" alt="">
                </div>
              </div>
              <div class="cell-right border-b">
                <div class="flex-layout font-15">
                  <span class="font-color">{{item.nickname}}</span>
                  <span class='color-red'><span v-if="item.settlePrice > 0">+</span>{{item.settlePrice}}元</span>
                </div>
                <div class="flex-layout">
                  <span class="font-12 font-color-8">{{item.settleDate}}</span>
                  <span class="font-10">{{settlement[item.settleType]}}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <div class="nodata" v-if="listData.length <= 0">暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script>
import { pageTakeOut, pageSettleData, statMemberCommission } from '@/api/personal'
export default {
  data() {
    return {
      active: 1,
      listData: [],
      memberStat: {},
      paramsTakeOut: {
        takeOutStatus: '',
        applyUserId: '',
        currentPage: 1,
        size: 20
      },
      paramsSettleData: {
        userId: '',
        currentPage: 1,
        size: 20,
        settleType: ''
      },
      pullLoad: {
        loading: false,
        finished: false
      },
      settlement: {},
      takeOutStatus: {
        0: '审核中',
        1: '已提现',
        2: '已驳回',
        3: '提现中'
      },
      globalStyle: {},
      getAppInfo: {}
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  mounted() {
    this.getAppInfo = this.$pt.getStorageSync('appInfo')
    this.globalStyle = this.getAppInfo.style
    this.paramsTakeOut.applyUserId = this.getCustomerId
    this.paramsSettleData.userId = this.getCustomerId
    let record = this.getCurrentPage().query.record
    console.log(record)
    console.log(typeof record)
    this.statMemberCommission()
    if (record === '1') {
      this.active = 2
      this.pageSettleData()
    } else {
      this.active = 1
      this.pageTakeOut()
    }
  },
  onReachBottom() {
    if (!this.pullLoad.finished) {
      if (this.active === 1) {
        this.pageTakeOut()
      } else {
        this.pageSettleData()
      }
    }
  },
  methods: {
    activeClick(item) {
      this.active = item
      this.listData = []
      if (item === 1) {
        this.paramsTakeOut.currentPage = 1
        this.pageTakeOut()
      }
      if (item === 2) {
        this.paramsSettleData.currentPage = 1
        this.pageSettleData()
      }
    },
    statMemberCommission() {
      this.$pt.showLoading()
      statMemberCommission({memberId: this.getCustomerId}).then(response => {
        this.$pt.hideLoading()
        if (response.isError) return
        this.memberStat = response.data
      })
    },
    pageTakeOut() {
      pageTakeOut(this.paramsTakeOut).then(response => {
        if (response.isError) return
        response.data.records.forEach(item => {
          // item.applyTime = item.applyTime.replace(' ', '\n')
          this.listData.push(item)
        })
        // 翻页+1
        this.paramsTakeOut.currentPage++
        if (this.listData.length === 0 || this.listData.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    },
    pageSettleData() {
      pageSettleData(this.paramsSettleData).then(response => {
        if (response.isError) return
        this.settlement = response.data.dict.incomeExpenseType
        this.settlement['1103'] = `TA店${this.getAppInfo.projectGoodsAlias || '分销商品'}返佣`
        this.settlement['1104'] = `本店${this.getAppInfo.projectGoodsAlias || '分销商品'}返佣`
        response.data.records.forEach(item => {
          this.listData.push(item)
        })
        // 翻页+1
        console.log(this.listData)
        this.paramsSettleData.currentPage++
        if (this.listData.length === 0 || this.listData.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  background: white;
  min-height: 100vh;
}
.cash-block{
  // background: #FFE200;
  // height: 170px;
  border-radius: 15px;
  overflow: hidden;
}
.cash-btn{
  width: 115px;
  height: 35px;
  border-radius: 25px;
  font-size: 14px;
  background: white;
  padding: unset;
  &::after{
    border: unset;
  }
}
.tabs-bar {
  margin-top: 8px;
  .tabs-title {
    padding-bottom: 6px;
    background: white;
    .tabs-title-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      height: 45px;
      .select-b {
        width: 225px;
        height: 25px;
        line-height: 25px;
        color: #999999;
      }
      .split-line {
        border: 0.2px solid #aaa;
        width: 1px;
        height: 25px;
      }
      .active {
        color: #333333;
        font-weight: bold;
      }
    }
  }
  .tabs-item {
    padding: 16px 18px 6px;
    background: white;
    font-size: 12px;
    &:last-child{
        .tabs-item-box{
          border-bottom: unset;
        }
      }
    .tabs-item-box {
      padding-bottom: 10px;
      .flex-layout {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .withdraw-amount {
        color: #292929;
        font-size: 18px;
      }
      .reason{
        font-weight: 300;
      }
    }
  }
  .income-wait {
    padding: 0 18px;
    background: white;
    font-size: 12px;
    .income-wait-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .flex-layout {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .cell-left {
        // width: 36px;
        // height: 36px;
        width: 42px;
        height: 42px;
        margin-right: 12px;
        div {
          width: 42px;
          height: 42px;
          /*border-radius: 50%;*/
          background: #fff;
          line-height: 42px;
          text-align: center;
        }
        img {
          width: 42px;
          height: 42px;
          border-radius: 50%;
          /*background: #f8c400;*/
          line-height: 42px;
          text-align: center;
        }
      }
      .cell-right {
        width: 298px;
        padding: 15px 0;
      }
    }
    &:last-child{
      .cell-right{
        border-bottom: unset;
      }
    }
  }
  .border-b {
    border-bottom: 1px solid #eee;
  }
}
.color--1 {
  color: green;
}
.color--2{
  color: #ff4a4a;
}
.color-red {
  color: #ff4a4a;
}
.nodata {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
</style>
